<template>
  <div class="flex flex-col p-4 h-65 neo-card neo-border">
    <!-- 角落装饰元素 -->
    <div class="absolute top-4 left-4 w-[0.5px] h-8 pointer-events-none">
      <div class="w-full h-full bg-gradient-to-b from-transparent to-blue-400/70"></div>
    </div>
    <div class="absolute top-4 right-4 w-[0.5px] h-8 pointer-events-none">
      <div class="w-full h-full bg-gradient-to-b from-transparent to-blue-400/70"></div>
    </div>
    <div class="absolute bottom-4 left-4 w-1.5 h-1.5 bg-blue-400/50 pointer-events-none"></div>
    <div class="absolute bottom-4 right-4 w-1.5 h-1.5 bg-blue-400/50 pointer-events-none"></div>
    <div class="h-full">
      <!-- 标题 -->
      <h2 class="text-lg font-semibold mb-2 text-center title-neo">待处理工单</h2>

      <!-- 带隐藏滚动条的表格容器 -->
      <div class="table-scroll" style="max-height: calc(100% - 2.5rem); overflow-y: auto;">
        <table class="w-full text-auto table-auto">
          <thead>
          <tr class="text-blue-200/80 border-b border-white/10 bg-white/5">
            <th v-for="col in columns" :key="col" class="py-2 px-2 text-left font-medium whitespace-nowrap">
              {{ col }}
            </th>
          </tr>
          </thead>
          <tbody class="divide-y divide-white/10">
          <tr
              v-for="(ticket, index) in tickets"
              :key="index"
              class="group/row hover:bg-blue-900/10 odd:bg-white/5 even:bg-white/10 transition-colors duration-300"
          >
            <!-- 设备编号 -->
            <td class="py-2 px-2 text-blue-300 whitespace-nowrap">{{ ticket.device }}</td>

            <!-- 设备名称 -->
            <td class="py-2 px-2 text-blue-200 whitespace-nowrap">{{ ticket.name }}</td>

            <!-- 报修人 -->
            <td class="py-2 px-2 text-blue-200 whitespace-nowrap">{{ ticket.reporter }}</td>

            <!-- 报修时间 -->
            <td class="py-2 px-2 text-blue-200 whitespace-nowrap">{{ ticket.time }}</td>

            <!-- 设备状态 -->
            <td class="py-2 px-2 whitespace-nowrap">
              <span :class="statusTagClass(ticket.status)" class="px-2 py-1 rounded text-xs font-medium transition-all">
                {{ ticket.status }}
              </span>
            </td>

            <!-- 故障等级 -->
            <td class="py-2 px-2 whitespace-nowrap">
              <span :class="priorityTagClass(ticket.priority)"
                    class="px-2 py-1 rounded text-xs font-medium transition-all">
                {{ ticket.priority }}
              </span>
            </td>

            <!-- 处理人 -->
            <td class="py-2 px-2 text-blue-200 truncate max-w-[120px] sm:max-w-[150px] md:max-w-[200px]">
              {{ ticket.assignee }}
            </td>

            <!-- 状态 -->
            <td class="py-2 px-2 whitespace-nowrap">
              <span :class="progressTagClass(ticket.progress)"
                    class="px-2 py-1 rounded text-xs font-medium transition-all">
                {{ ticket.progress }}
              </span>
            </td>

            <!-- 持续时间 -->
            <td class="py-2 px-3 text-blue-200/70 whitespace-nowrap">{{ ticket.duration }}</td>
          </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</template>

<script setup>
import {ref, onMounted, onBeforeUnmount} from 'vue'
import axios from 'axios'
import {format} from 'date-fns'

// 保持原有逻辑不变
const props = defineProps({
  tickets: Array
})

const tickets = ref([])
const columns = ['设备编号', '设备名称', '报修人', '报修时间', '设备状态', '故障等级', '处理人', '状态', '持续时间']
let refreshInterval = null

const fetchTickets = async () => {
  try {
    const res = await axios.get('/api/Notice/GetTickets')
    if (res.data.isSuccess) {
      const newTickets = res.data.data.map(item => ({
        device: item.equipmentNumber,
        name: item.equipmentName,
        reporter: item.creator,
        time: format(new Date(item.createTime), 'yyyy-MM-dd HH:mm'),
        status: item.equipmentStatus,
        priority: item.faultLevel,
        assignee: item.creator,
        progress: item.ticketStatus,
        duration: item.duration
      }))

      // 无感刷新：仅在数据变化时更新
      const oldStr = JSON.stringify(tickets.value)
      const newStr = JSON.stringify(newTickets)
      if (oldStr !== newStr) {
        tickets.value = newTickets
      }
    }
  } catch (error) {
    console.error('获取待处理工单失败:', error)
  }
}

onMounted(async () => {
  await fetchTickets()
  refreshInterval = setInterval(fetchTickets, 3000)
})

onBeforeUnmount(() => {
  if (refreshInterval) {
    clearInterval(refreshInterval)
    refreshInterval = null
  }
})

// 样式逻辑不变
const statusTagClass = (status) => {
  switch (status) {
    case '故障':
      return 'bg-red-900/30 text-red-400 border border-red-500/30'
    case '带病运行':
      return 'bg-yellow-900/30 text-yellow-400 border border-yellow-500/30'
    case '正常':
      return 'bg-green-900/30 text-green-400 border border-green-500/30'
    default:
      return 'bg-gray-700/50 text-gray-400 border border-gray-500/30'
  }
}

const priorityTagClass = (priority) => {
  switch (priority) {
    case '紧急':
      return 'bg-red-900/30 text-red-400 border border-red-500/30 shadow-[0_0_3px_rgba(239,68,68,0.3)]'
    case '一般':
      return 'bg-blue-900/30 text-blue-400 border border-blue-500/30'
    case '无':
      return 'bg-gray-700/50 text-gray-400 border border-gray-500/30'
    default:
      return 'bg-gray-700/50 text-gray-400 border border-gray-500/30'
  }
}

const progressTagClass = (progress) => {
  switch (progress) {
    case '维修中':
      return 'bg-blue-900/30 text-blue-400 border border-blue-500/30 shadow-[0_0_3px_rgba(59,130,246,0.3)]'
    case '已分配':
      return 'bg-purple-900/30 text-purple-400 border border-purple-500/30'
    default:
      return 'bg-gray-700/50 text-gray-400 border border-gray-500/30'
  }
}
</script>

<style scoped>
/* 核心：隐藏滚动条但保留滚动功能 */
.table-scroll {
  /* 隐藏 Firefox 滚动条 */
  scrollbar-width: none;
  /* 隐藏 IE 和 Edge 滚动条 */
  -ms-overflow-style: none;
}

/* 隐藏 Chrome, Safari 和 Opera 滚动条 */
.table-scroll::-webkit-scrollbar {
  display: none;
}

/* 可选：添加滚动指示器，在有滚动内容时显示 */
.table-scroll {
  position: relative;
}

.table-scroll::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 4px;
  background: linear-gradient(
      to bottom,
      transparent,
      rgba(59, 130, 246, 0.2) 20%,
      rgba(59, 130, 246, 0.2) 80%,
      transparent
  );
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

/* 只有在可以滚动时才显示指示器 */
.table-scroll:hover::after {
  opacity: 1;
}
</style>
